<template>
  <custom-window :title="title">
    <div class="content">
      <div class="list-box">
        <div class="list-title">
          <div class="td">油罐名称</div>
          <div class="td">类型</div>
          <div class="td">油量</div>
          <div class="td">时间</div>
        </div>
        <div class="list-content">
          <div class="list-row" v-for="(item, index) of listData" :key="index">
            <div class="td">{{item.ygId}}</div>
            <div class="td">{{item.ygType =='2'?'出油':item.ygType =='1'?'收油':''}}</div>
            <div class="td">{{item.ygWeight}}</div>
            <div class="td">{{item.ygTime}}</div>
          </div>
        </div>
      </div>
      <!--
        参考实现思路：
        这里可以不用这个插件，直接使用css动画方式实现
        例如有16条数据，循环渲染两次，比如第16条数据，下面紧接着就是第一条，这样可以达到无缝循环滚动的感觉
        <div class="content">
          <div class="wrap">
            <div v-for="i in 16"></div>
            <div v-for="i in 16"></div>
          </div>
          最后通过动画平移整个wrap，通过tranform，从0到100%还是-100%来着，设置动画无限循环以及匀速
        </div>
      -->
    </div>
  </custom-window>
</template>

<script>
import CustomWindow from '@/components/CustomWindow'
import minxin from '@/utils/mixin'
export default {
  mixins: [minxin],
  name: 'CardItem4',
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  components: {
    CustomWindow
  },
  data () {
    return {
      listData: []
    }
  },
  computed: {
  },
  watch: {
  },
  created () {
    this.getData().then(() => {
      this.initTimer()
    })
  },
  beforeDestroy () {
    clearInterval(this._timer)
  },
  methods: {
    initTimer () {
      this._timer = setInterval(this.getData, 60 * 60 * 1000)
    },
    getData () {
      return this.$axios.get(this.$apis.screen.selectYgInventoryByPage).then(res => {
        console.log('res: ', res)
        if (res) {
          this.listData = res.list || []
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.content {
  // do something
}
.list-box {
  margin: 16px;

  .list-title {
    display: flex;
    align-items: center;
    height: 46px;
    background: #0c3862;
    font-size: 16px;
    color: #fff;
    padding: 0 14px;
    text-align: center;

    .td {
      width: 30%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      &:nth-child(2) {
        width: 10%;
      }

      &:nth-child(3) {
        width: 20%;
      }

      &:nth-child(4) {
        width: 40%;
      }
    }
  }

  .list-content {
    height: 252px;
    /* overflow-y: auto; */
    overflow: hidden;
  }

  .list-row {
    display: flex;
    align-items: center;
    height: 46px;
    background: #073159;
    font-size: 16px;
    color: #fff;
    padding: 0 14px;
    text-align: center;
    margin-top: 14px;
    animation: scroll 5s linear infinite;
    .td {
      width: 30%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      &:nth-child(2) {
        width: 10%;
      }

      &:nth-child(3) {
        width: 20%;
      }

      &:nth-child(4) {
        width: 40%;
      }
    }
  }
  @keyframes scroll {
    0% {
      transform: translateY(0%);
    }
    100% {
      transform: translateY(-100%);
    }
  }
}
</style>
